<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, onMounted, reactive, ref, nextTick, watch } from "vue";

const state = reactive({
  isActive: ''
});

import { message } from "ant-design-vue";

import { } from "@ant-design/icons-vue";

const dialog = ref(null);

const emit = defineEmits(["isSubmit:data"]);

const isSubmit = () => {
  if (!['ov4', 'ov5'].includes(state.isActive)) return message.error('请选择合成模型!')
  emit('isSubmit', state.isActive)
}

const closeModal = () => {
  dialog.value.closeModal();
};

const showModal = () => {
  dialog.value.showModal();
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div class="audition">
    <!-- 
      :title="null"

     -->
    <baseModel ref="dialog" :contentWidth="'540px'" minWidth="540px" :zIndex="9999"
      :getContainer="() => document.queryselector('.audition')" :closable="false" :maskClosable="false">
      <template #title>
        <span class="title_text">选择合成模型版本</span>
      </template>
      <template #content>
        <div class="content">
          <div class="mod_cart_list">
            <div @click="state.isActive = 'ov4'" class="mod_cart_item" :class="{
              'active': state.isActive == 'ov4'
            }">
              <span>普通合成</span>
              <!-- <span>9积分/秒</span> -->
            </div>
            <div class="mod_cart_item" :class="{
              'active': state.isActive == 'ov5'
            }" @click="state.isActive = 'ov5'">

              <span>高级合成</span>

              <!-- <span>9积分/秒</span> -->

            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="bottom">
          <a-button class="btn" key="submit" type="primary" @click="isSubmit">确认</a-button>
        </div>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.title_text {
  font-size: 14px;
  font-weight: 600;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;

  .mod_cart_list {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    font-weight: 600;
    // padding: 20px;
    margin-top: 20px;

    .mod_cart_item {
      flex: 1;
      border: 1px solid #c4c4c4;
      cursor: pointer;
      padding: 10px;
      font-size: 15px;
      color: #333;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all .3s;
      border-radius: 8px;

      &:hover {
        border-color: var(--ss-primary-color-hover);
        color: var(--ss-primary-color);
      }

    }

    .active {
      border-color: var(--ss-primary-color-hover);
      color: var(--ss-primary-color);
    }
  }
}

.bottom {
  display: flex;

  .btn {
    margin: 0 auto;
    width: 85px;
  }
}
</style>
